<template>
  <ElButton type="primary" @click="clgData">打印数据</ElButton>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type GridOptions } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

import json from './data/cus-cmp.json'
const rowData = ref<IOlympicData[]>(json)
const gridOptions = ref<GridOptions<IOlympicData>>({
  rowData: json,
  enableCellSpan: true,
  columnDefs: [
    // 行 文字居中
    { field: 'name', cellStyle: { textAlign: 'center' } },
    { field: 'age' },
    {
      field: 'gender',
      cellRenderer: 'medalRender',
      cellRendererParams: { rowData: rowData.value },
    },
    { field: 'phone', cellRenderer: 'phoneRender' },
    { field: 'email' },
    { field: 'address' },
    { field: 'company' },
    { field: 'rate', cellRenderer: 'rateRender' },
  ],
  defaultColDef: {
    flex: 1,
  }
})

const clgData = () => {
  console.log('当前表格数据:', rowData.value)
}

import medalRender from './components/medalRender.vue'
import phoneRender from './components/phoneRender.vue'
import rateRender from './components/rateRender.vue'
// 局部导入组件方式(应该是导入的组件没有引用, 导致被 树摇(Tree Shaking) 掉了)
defineExpose({
  rateRender,
  medalRender,
  phoneRender
})
</script>

<style scoped>
/* 列名称居中 */
.ag-grid-vue :deep(.ag-header-cell-label) {
  justify-content: center;
}
</style>
